<template>
  <div class="mydata">
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑个人资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="head">
      <van-image round width="100px" height="100px" :src="imgData" />
      <van-uploader :after-read="afterRead" />
    </div>

    <div class="main">
      <van-form validate-first>
        <!-- 昵称 -->
        <van-field v-model="username" label="昵称" />

        <!-- 性别 -->
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" @click="onman">男</van-radio>
              <van-radio name="2" @click="onwoman">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- 生日 -->
        <van-field
          readonly
          clickable
          :value="value"
          label="生日"
          placeholder="点击选择日期"
          @click="showDate = true"
        />

        <van-popup
          v-model="showDate"
          round
          position="bottom"
          :style="{ height: '50%' }"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
          >
            <button type="button" class="van-picker__cancel" @click="cancel">
              取消
            </button>
            <div class="van-ellipsis van-picker__title">选择年月日</div>
            <button type="button" class="van-picker__confirm" @click="onData">
              确认
            </button>
          </van-datetime-picker>
        </van-popup>

        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="ModifyNickname"
            >保存</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mydata",

  data() {
    return {
      imgData: "",

      //用户信息数据
      username: "",

      radio: "1",

      timer: null,

      // 生日
      value: "",
      showDate: false,
      minDate: new Date(1988, 0, 1),
      maxDate: new Date(2021, 10, 1),
      currentDate: new Date(2021, 0, 1),
    };
  },

  created() {
    this.getMyData();

    //获取性别
    let arr = localStorage.getItem("arr");
    // 
    if (arr) {
      this.radio = arr.replace('"', "").replace('"', "");
    }

    //获取生日
    let birthday = localStorage.getItem("birthday");
    // 
    if (birthday) {
      this.value = birthday.replace('"', "").replace('"', "");
    }
  },

  methods: {
    //返回
    onClickLeft() {
      this.$router.push({ name: "My" });
    },

    //上传头像
    afterRead(file) {
      let img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, "");
      // 

      this.axios({
        method: "post",
        url: "/updateAvatar",
        data: {
          imgType: "png",
          serverBase64Img: img,
        },
      })
        .then((res) => {
          // 

          // 查询成功
          if (res.data.code === "H001") {
            this.$router.go(0);
          }
        })
        .catch((err) => {
          
        });
    },

    //修改昵称
    ModifyNickname() {
      this.axios({
        method: "post",
        url: "/updateNickName",
        data: {
          nickName: this.username,
        },
      })
        .then((res) => {
          // 
        })
        .catch((err) => {
          
        });
    },

    //性别
    onman() {
      

      localStorage.removeItem(this.radio);
      localStorage.setItem("arr", JSON.stringify(this.radio));
    },

    onwoman() {
      

      localStorage.removeItem(this.radio);
      localStorage.setItem("arr", JSON.stringify(this.radio));
    },

    // 生日
    onData() {
      this.showDate = false;
      localStorage.removeItem(this.value);

      let date = this.currentDate;
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      this.value = y + "-" + m + "-" + d;

      localStorage.setItem("birthday", JSON.stringify(this.value));
    },

    cancel() {
      this.showDate = false;
    },

    //获取我的资料
    getMyData() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((res) => {
          // 

          // 未登录跳转到登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          // 查询成功
          if (res.data.code === "A001") {
            this.username = res.data.result[0].nickName;
            this.imgData = res.data.result[0].userImg;
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 40px;
}

/deep/.van-nav-bar__title {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #37343b;
}

.head {
  width: 100%;
  height: 160px;
  position: relative;
  top: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

/deep/.van-image--round {
  position: relative;
  left: 136px;
}

//上传头像
/deep/.van-uploader {
  width: 100px;
  height: 100px;
  position: relative;
  top: 10px;
  left: 44px;
}

/deep/ .van-uploader__upload {
  margin: 0;
  opacity: 0;
}

// 用户信息
.main {
  width: 100%;
  position: relative;
  top: 50px;
}

/deep/.van-radio__icon--checked .van-icon {
  background-color: #37343b;
  border-color: #37343b;
}

/deep/.van-button--info {
  background-color: #37343b;
  border-color: #37343b;
}
</style>